<script lang="ts" setup>
import { defineProps, defineEmits, ref } from 'vue'

import type { DefaultDetailData } from '@/TypingMore/VideoTyping'
import type { Episodes, MainSection } from '@/TypingMore/SeasonTyping'

const props = defineProps<{
    videoData: DefaultDetailData
    episodes: Array<Episodes>
    sectionEpisodes: Array<MainSection>
    epIdValue?: string | undefined
}>()

const emits = defineEmits(['getVideoAndAnthology', 'getDanMuData'])

const show = ref(false)

const setVideoUrl = (episodesItem: Episodes) => {
    let epId = episodesItem.share_url.split('ep')[1]
    emits('getVideoAndAnthology', epId, episodesItem.cover)
    emits('getDanMuData', episodesItem.cid)
}

const colorData = ref('color: #fb7299 ; border: 1px solid #fb7299')
</script>


<template>
    <div class=" border-b" v-if="videoData?.data?.View.redirect_url">
        <div class=" flex justify-between px-1 py-2 ">
            <div>选集</div>
            <div class=" text-neutral-400">查看更多
                <span class="iconfont icon-jinrujiantouxiao ml-2"></span>
            </div>
        </div>
        <div class=" overflow-auto ">
            <div>
                <div class=" whitespace-nowrap relative py-2 px-4 border-b">
                    <div v-for="(v, index) in episodes " :key="v.aid"
                        class="inline-block w-32 py-1 px-3 mr-3 border rounded-md"
                        :style="v.share_url.split('ep')[1] === epIdValue ? colorData : ''" @click="setVideoUrl(v)">
                        <div class=" is-vip vip ">{{
                                v.badge
                        }}</div>
                        <div class="long-title">{{ v.long_title }}
                        </div>
                        <div>
                            <p class="text-xs ">{{ '第' + v.title + '话' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div v-for="e in sectionEpisodes" :key="e.id">
            <div class=" flex justify-between px-1 py-2">
                <div>{{ e.title }}</div>
                <div class=" text-neutral-400" @click="show = true">查看更多<span class="iconfont icon-jinrujiantouxiao ml-2"></span>
                </div>
            </div>
            <div class=" overflow-auto">
                <div class=" flex px-1 ">
                    <div v-for="v in e.episodes " :key="v.aid" class=" w-32 flex-shrink-0 px-1"
                        :style="(v.share_url.split('ep')[1] === epIdValue ? 'color: #fb7299' : '')"
                        @click="setVideoUrl(v)">
                        <img :src="v.cover" class="inline-block">
                        <div>
                            <p>{{ v.title }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" position="bottom" :overlay="false" :style="{ height: '30%' }" />
    </div>
</template>

<style scoped>
.vip {
    background-color: #FB7299;
    color: #fff;
}
</style>